<script setup>
import {ref,onMounted} from 'vue'
import easyapi from '../api'
import { colorPickerContextKey, ElMessage,ElMessageBox, SCOPE } from 'element-plus';
import { id } from 'element-plus/es/locales.mjs';
import { useRadio } from 'element-plus/es/components/radio/src/use-radio.mjs';
//定义绑定的数据---定义的变量
const tableData=ref([]);//---查询数据用的
const addVisible=ref(false);//---点击新增按钮之后用的
const addObject=ref({});//---用于在弹出信息框之后添加数据用的
const editWinVisible = ref(false);
const editObject = ref({});
const total=ref(90);
//记录修改数据的下标
var editIndex = -1;
//查询数据执行的代码，用tableDate绑定后台的数据
const checkObj=ref({
  page:1,
  size:10
});

//上传头像绑定的数据
const imageUrl=ref({});
//上传头像窗口控制
const uploadImgWinVisible = ref(false);


onMounted(async function(){
 checkData();
});

//删除数据执行的代码
const del=function(index,row){
  ElMessageBox.confirm(
    "确认要删除该行数据吗",
    "提示框",
    {
      confirmButtonText:"确认",
      cancelButtonText:"取消",
      type:'warning'
    }
  ).then(async function(){
    console.log(row);
    //console.log(index);
    //提交数据
    
    let result=await easyapi.del("/api/delcarsort",row.id);
    //刷新表格的数据
    if(result.code==200){
    tableData.value.splice(index,1);
    //提示删除成功
    ElMessage({
        type: 'success',
        message: '删除成功'
      })
    }else{
      ElMessage({
        type: 'info',
        message: '删除失败'
      })
    }
  }).catch(function(){

  });
}

//点击新增按钮执行的代码显示窗口
const openaddwin=function(){
  addObject.value={};
addVisible.value=true;
}
const closeaddwin=function(){
addVisible.value=false;
}

//保存新增数据代码 addObject
const addsave=async function(){
  //发送请求
  await easyapi.postForm("/api/addcarsort",addObject.value);
  //表格数据变更
  //提示
  ElMessage({
        type: 'success',
        message: '添加成功'
      })
      addVisible.value=false;
      checkData();
}
//点击编辑按钮执行的方法
const edit = function (index, row) {
 
 //记录修改数据的下标
 editIndex = index;
 //绑定要修改的数据
 editObject.value.id = row.id;
 editObject.value.model = row.model;
 editObject.value.manufacturer = row.manufacturer;
 editObject.value.manufacturyear= row.manufacturyear;
 editObject.value.enginetype= row.enginetype;
 editObject.value.price= row.price;
 editObject.value.purchasedate= row.purchasedate;
 //打开对话框
 editWinVisible.value = true;

}
const editSave = async function () {
  //发送请求
  let result = await easyapi.putJson("/api/editcarsort",editObject.value);
  //刷新表格
  tableData.value[editIndex] = result.data;
  //提示
  ElMessage({
    type: 'success',
    message: '保存成功'
  });
  editWinVisible.value = false;
}
const checkData=async function(val){
  if(typeof val=='number'){
    checkObj.value.page=val;
  }
    //获取数据
    let result=await easyapi.get("/api/selectcarsort",checkObj.value)
    //result 返回的数据是 {code，data，message} data--》{list，count}
    //更新数据
    tableData.value=result.data.a;
    total.value=result.data.count;
}
// const changePage=function(val){
//   //val就是点击的页码
//   pageObj.value.page=val;

// }
const uploadimg=function(index,row){
  uploadImgWinVisible.value=true;
  //显示该用户已经上传的头像
  editIndex=index;
  editObject.value.id=row.id;
}

const handleAvatarSuccess=function(result,uploadFile){
console.log(result);
console.log(uploadFile);
imageUrl.value=result.data
}
const beforeAvatarUpload=function(){}

const Saveimg=async function(){
  //将文件的地址和数据的id发送到后台
  editObject.value.img=imageUrl.value;
let result=await easyapi.putForm("/api/carimg",editObject.value);

}
</script>
<template>
  <div class="showAAA">
  <el-input v-model="checkObj.model" style="width: 200px" placeholder="请填入查询的车辆类型" />
  <el-input v-model="checkObj.manufacturer" style="width: 200px" placeholder="请填入查询的生产商" />
  <el-button type="success" @click="checkData" >查询</el-button>
  <el-button type="primary" @click="openaddwin" >新增</el-button>
    <el-table
    :data="tableData"
    style="width: 100%"
  >
    <!-- <el-table-column prop="id" label="id" width="50" /> -->
    <el-table-column prop="model" label="车辆类型" width="150" />
    <el-table-column prop="manufacturer" label="生产商" width="180" />
    <el-table-column prop="manufacturyear" label="生产日期" width="150"/>
    <el-table-column prop="enginetype" label="驱动类型" width="150"/>
    <el-table-column prop="price" label="市场购买价格" width="150"/>
    <el-table-column prop="purchasedate" label="购买日期" width="150"/>

    <el-table-column  label="操作" >
      <template #default="scope">
        <el-button type="primar" @click="edit(scope.$index,scope.row)" style="background-color:aquamarine">编辑</el-button>
        <el-button type="primar" @click="del(scope.$index,scope.row)" style="background-color:aquamarine">删除</el-button>
        <!-- <el-button type="primar" @click="uploadimg(scope.$index,scope.row)" style="background-color:aquamarine">上传头像</el-button> -->

      </template>
    </el-table-column>  
  </el-table>

  <!-- size每页的条数 -->
  <el-pagination 
  :page-size="checkObj.size"
  :current-page="checkObj.page"
  background layout="prev, pager, next"  :total="total" @current-change="checkData"/>

<!-- 新增信息弹出的代码框 -->
<el-dialog v-model="addVisible" title="新增车辆类型" width="400" >
  <el-form :model="addObject">
    <!-- <el-form-item label="id" :label-width="80">
      <el-input v-model="addObject.id" autocomplete="off" />
    </el-form-item> -->
    <el-form-item label="车辆类型" :label-width="80">
      <el-input v-model="addObject.model" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产商" :label-width="80">
      <el-input v-model="addObject.manufacturer" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产日期" :label-width="80">
      <el-input v-model="addObject.manufacturyear" autocomplete="off" />
    </el-form-item>
    <el-form-item label="驱动类型" :label-width="80">
      <el-input v-model="addObject.enginetype" autocomplete="off" />
    </el-form-item>
    <el-form-item label="市场价格" :label-width="80">
      <el-input v-model="addObject.price" autocomplete="off" />
    </el-form-item>
    <el-form-item label="实际价格" :label-width="80">
      <el-input v-model="addObject.purchasedate" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="addVisible = false">取消</el-button>
      <el-button type="primary" @click="addsave">
        确认
      </el-button>
    </div>
  </template>
</el-dialog>

<!-- 编辑信息弹出的代码框 -->
<el-dialog v-model="editWinVisible" title="编辑" width="500">
  <el-form :model="editObject">
    <el-form-item label="车辆类型" :label-width="80">
      <el-input v-model="editObject.model" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产商" :label-width="80">
      <el-input v-model="editObject.manufacturer" autocomplete="off" />
    </el-form-item>
    <el-form-item label="生产日期" :label-width="80">
      <el-input v-model="editObject.manufacturyear" autocomplete="off" />
    </el-form-item>
    <el-form-item label="驱动类型" :label-width="80">
      <el-input v-model="editObject.enginetype" autocomplete="off" />
    </el-form-item>
    <el-form-item label="市场购买价格" :label-width="80">
      <el-input v-model="editObject.price" autocomplete="off" />
    </el-form-item>
    <el-form-item label="购买日期" :label-width="80">
      <el-input v-model="editObject.purchasedate" autocomplete="off" />
    </el-form-item>
  </el-form>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="editWinVisible = false">取消</el-button>
      <el-button type="primary" @click="editSave">
        保存
      </el-button>
    </div>
  </template>
</el-dialog>
<!-- 弹出的上传头像的框架 -->
<el-dialog v-model="uploadImgWinVisible" title="上传头像" width="500">
  <el-upload
  class="avatar-uploader"
  action="/api/uploadcarimg/8"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload"
>
  <img v-if="imageUrl" :src="imageUrl" class="avatar" />
  <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
</el-upload>
<template #footer>
  <div class="dialog-footer">
    <el-button type="primary" @click="Saveimg">
      保存
    </el-button>
  </div>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.showAAA{
  
  height: 930px;
  width: 100%;
  opacity: 0.8;
  background-color: rgba(255, 255, 255, 0);

}
</style>